var num
let user = [{ number: 1, name: '董事长', zhanghao: 'dongshizhang', phone: '123123412', jiagou: '超级管理员', juese: '招商员', quanxian: '自己', kehu: '显示', caozuo: '<button id="change" type=button>编辑</button><button id="shanchu" type=button>删除</button>' },
{ number: 2, name: '总经理', zhanghao: 'zongjinli', phone: '1223123123123', jiagou: '保定孵化器', juese: '管理员', quanxian: '看机构', kehu: '显示', caozuo: '<button id="change" type=button>编辑</button><button id="shanchu" type=button>删除</button>' },
{ number: 3, name: '副总经理', zhanghao: 'fuzongjinli', phone: '12312312312', jiagou: '保定孵化器', juese: '管理员', quanxian: '看机构', kehu: '显示', caozuo: '<button id="change" type=button>编辑</button><button id="shanchu" type=button>删除</button>' },
{ number: 4, name: '经理', zhanghao: 'jinli', phone: '12312312312', jiagou: '保定孵化器', juese: '管理员', quanxian: '看机构及以下', kehu: '显示', caozuo: '<button id="change" type=button>编辑</button><button id="shanchu" type=button>删除</button>' },
{ number: 5, name: '职员', zhanghao: 'zhiyuan', phone: '123123123', jiagou: '保定孵化器', juese: '管理员', quanxian: '看机构及以下', kehu: '显示', caozuo: '<button id="change" type=button>编辑</button><button id="shanchu" type=button>删除</button>' },
{ number: 6, name: '秘书', zhanghao: 'mishu', phone: '2123123123123', jiagou: '保定孵化器', juese: '管理员', quanxian: '看机构及以下', kehu: '显示', caozuo: '<button id="change" type=button>编辑</button><button id="shanchu" type=button>删除</button>' },
{ number: 7, name: '保洁', zhanghao: 'baojie', phone: '212312312312312', jiagou: '保定孵化器', juese: '管理员', quanxian: '看机构及以下', kehu: '显示', caozuo: '<button id="change" type=button>编辑</button><button id="shanchu" type=button>删除</button>' },


]
    ;
// window.onload = function () {
//     displaydata();//显示数据
//     // addBtn4Event1();//添加btn4的事件
// }
function displaydata() {
    $('#tball').html('')
    let fragment1 = document.createDocumentFragment();
    for (let i = 0; i < user.length; i++) {
        let tr = document.createElement('tr');
        tr.innerHTML = `
        <td>${user[i].number}</td>
            <td>${user[i].name}</td>
                <td>${user[i].zhanghao}</td>
                    <td>${user[i].phone}</td>
                    <td>${user[i].jiagou}</td>
                    <td>${user[i].juese}</td>
                    <td>${user[i].quanxian}</td>
                    <td>${user[i].kehu}</td>
                    <td>${user[i].caozuo}</td>
                         `;

        fragment1.appendChild(tr);
       
    }
    $('#tball').append(fragment1)
}
displaydata()




//新增
let btn3 = document.getElementById('btn3');
let xinzengtanchu = document.getElementById('xinzengtanchu')
//  let add=document.getElementById('add')
btn3.onclick = function () {
    xinzengtanchu.style.display = 'block'
}




addbtn.onclick = function ()  {
  
    let number = document.getElementById('number1').value;
    console.log(number);
    let name = document.getElementById('name1').value;
    let zhanghao = document.getElementById('zhanghao1').value;
    let phone = document.getElementById('phone1').value;
    let jiagou = document.getElementById('jiagou1').value;
    let juese = document.getElementById('juese1').value
    let quanxian = document.getElementById('quanxian1').value;
    let kehu = document.getElementById('kehu1').value;
    let addbtn=document.getElementById('addbtn1');
    
    let caozuo = '<button id="shanchu">删除</button><button id="change">编辑</button>';
    console.log(number);
   layer.alert('添加成功！')
    
    // console.log(operation)
    // xinzengtanchu.style.display='none'
    // let user1={number:number,name:name ,describe : describe,time: time}  
   
    user.push({ number: number, name: name, zhanghao: zhanghao,  phone:  phone, jiagou: jiagou, juese: juese, quanxian:quanxian,kehu:kehu,caozuo:caozuo})
    
    xinzengtanchu.style.display='none'
    displaydata()
    paging()
    // displaydata()
    // let cancel = document.getElementById('cancel')
    // cancel.onclick = function  () {
    //     xinzengtanchu.style.display = 'none'

    // }
    
}


//查询 

  let chongzhi = document.getElementById('chongzhi');
chongzhi.onclick = function () {
    document.getElementById('search').value = ''
    displaydata()
    paging()
}

//分页
paging();
function paging() {
let page = 1;//第几页
let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
let serialNumber = user.length;//序号
onlouad(0, 3)//初始页面信息，第一页
$("#inputPage").val(page);//页码


// 下一页
$("#nextpage").click(function () {
if (no + 3 < serialNumber) {//如果no+5小于数据条数
no += 3;
page++;
$("#inputPage").val(page);
if (serialNumber >= (no + 3)) {
onlouad(no, no + 3);
} else (
onlouad(no, serialNumber)

)
}

});

// 上一页
$("#lastpage").click(function () {
if (no - 3>= 0) {
no -= 3;
page--;
$("#inputPage").val(page);
onlouad(no, no + 3);
}
});
}


function onlouad(n,a) { //分页调用函数
$("#tball").html("")
//文档碎片
let fragment1 = document.createDocumentFragment();
for (let i = n; i < a; i++) {
let tr = document.createElement("tr");
tr.innerHTML = `
<td>${user[i].number}</td>
<td>${user[i].name}</td>
<td>${user[i].zhanghao}</td>
<td>${user[i].phone}</td>
<td>${user[i].jiagou}</td>
<td>${user[i].juese}</td>
<td>${user[i].quanxian}</td>
<td>${user[i].kehu}</td>
<td>${user[i].caozuo}</td>
`;

fragment1.appendChild(tr);
}
$("#tball").append(fragment1);
}



//删除
del()
function del() {
    $('tbody tr td:nth-child(9) button:nth-child(2)').click
        (
            function () {
                $(this).parent().parent().remove();
                console.log($(this))
            }
        )
}


// 编辑按钮
redact()
function redact() {
let show;
$('tbody tr #change').click(function (e) { 
    // id: 1, PrincipalName: '原生广场', displayStatus: '显示', remark: '无备注', RegionName: 'A区' 
    let id =  $(this).parent().prev().prev().prev().prev().prev().prev().prev().prev()[0].innerText;
    //获取当前按钮id
    // console.log(id)
    for (let i = 0; i < user.length; i++) {
        
        if (user[i].number == id) {
            num = i;
            break;
        }
    }
    // console.log(num)

    $('#bianjitanchu').css('display', 'block');
    document.getElementById('number').value = user[num].number;
    document.getElementById('name').value = user[num].name;
    document.getElementById('zhanghao').value = user[num].zhanghao;
    document.getElementById('phone').value = user[num].phone;
    document.getElementById('jiagou').value = user[num].jiagou;
    document.getElementById('juese').value = user[num].juese;
    document.getElementById('quanxian').value = user[num].quanxian;
    document.getElementById('kehu').value = user[num].kehu;

  
    btnS2 = document.getElementById('confirm');
    btnS2.onclick = function () {
       
        btnSubmit2(num);
    }
    //获取数据当前id
    // let PrincipalName = document.getElementById('PrincipalName').value;
    // let remark = document.getElementById('remark').value;
    // let introduce = document.getElementById('introduce').value;
    // let show = document.getElementById('show').checked;
    // let unshow = document.getElementById('unshow').checked;
 
    // $('#BtnSubmit2').click(btnSubmit2);
    // $('show').checked = show;

})

}

    //编辑提交

    function btnSubmit2(num) {
        
let number = document.getElementById('number').value;
let name = document.getElementById('name').value;
let zhanghao= document.getElementById('zhanghao').value;
let phone = document.getElementById('phone').value;
let jiagou = document.getElementById('jiagou').value;
let juese = document.getElementById('juese').value;
let quanxian = document.getElementById('quanxian').value;
let kehu = document.getElementById('kehu').value;
let caozuo=user[num].caozuo






//Alert
$('#bianjitanchu').css('display', 'none');
user.splice(num, 1, { number, name,zhanghao, phone,jiagou,juese,quanxian,kehu,caozuo});
// console.log((num + 1));

layer.alert('提交成功！')
displaydata();


//重置

}